<template>
	<view id="blance-data header-top-margin" :data-theme="themeStyle">
		<header-back :headerTitle="headerTitle"></header-back>
		
		<view class="content-data ">
			<view class="header-wrap header-wrap-bg">
				<view class="wrap-box">
					<view class="wrap" @click="changAccountType('balance')">
						<view class="wrap-text">{{$lang('common.available')}}</view>
						<view class="num wrap-text">{{Number(walletObj.balance).toFixed(4) || 0}}</view>
					</view>
					<view class="wrap wrap-c" @click="changAccountType('balance_freeze')">
						<view class="wrap-text">{{$lang('common.freeze')}}</view>
						<view class="num wrap-text">{{Number(walletObj.balance_freeze).toFixed(4) || 0}}</view>
					</view>
					<view class="wrap wrap-r">
						<view class="wrap-text">{{$lang('common.amount')}}</view>
						<view class="num wrap-text">{{Number(walletObj.balance_to_cny).toFixed(4) || 0}}</view>
					</view>
				</view>
				<view class="wrap-bom ">
					<view class="bom-box wrap-bd" @click="toRoute(`/pages/member/blance/recharge?cid=${cid}`)">
						<image src="/static/icon/zhuanzhang_07.png" class="bom-icon" mode=""></image>
						<view class="wrap-text">{{$lang('common.recharge')}}</view>
					</view>
					<view class="bom-box wrap-bd bom-c" @click="toRoute(`/pages/member/blance/withdraw?type=1&cid=${cid}`)">
						<image src="/static/icon/zhuanzhang_07.png" class="bom-icon" mode=""></image>
						<view class="wrap-text">{{$lang('common.withdrawal')}}</view>
					</view>
					<view class="bom-box bom-r" @click="toRoute(`/pages/member/blance/withdraw?type=2&cid=${cid}`)">
						<image src="/static/icon/zhuanzhang_06.png" class="bom-icon" mode=""></image>
						<view class="wrap-text">{{$lang('common.transfer')}}</view>
					</view>
				</view>
			</view>
			<view class="data-box">
        <scroll-view scroll-x="true">
          <view class="data-scroll-box">
            <view :class="['data-item',tabIndex== i?'item-act':'']" @click="setTabs(tabs,i)" v-for="(tabs,i) in tabArr" :key="i">
              <view class="data-name">{{tabs.title}}</view>
              <view  class="after"></view>
            </view>
          </view>
        </scroll-view>
			</view>
			
			<view class="data-ul" v-if="recordArr.length > 0">
				<view class="data-li" v-for="(item,index) in recordArr" :key="index" @click="toDetail(item.id)">
					<view class="data-top">
						<view class="">
							<text class="li-name">{{item.type_name}}</text>
						</view>
						<view class="li-name">{{item.account_data}}</view>
					</view>
					<view class="data-bom">
						<view class="li-time">{{item.create_time}}</view>
						<view class="">
							<!-- <text class="li-state">审核通过</text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="no-ul" v-else>
				-- {{$lang('common.noMoreData')}} --
			</view>
			
			
		</view>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
  import globalConfig from '@/common/js/golbalConfig.js';

  export default {
    mixins:[globalConfig],
	data() {
		return {
			cid: '',
			headerTitle: 'USDT',
			tabArr: [],
			tabIndex: 0,
			walletObj: {},
			recordArr: [],
			page: 1,
			totalPage: 1,
      log_type: '',
      account_type: 'balance', // balance_freeze
		};
	},
	onLoad(e) {
    this.tabArr = [
      {title: this.$lang('common.all'), state: '', log_type: ''},
      {title: this.$lang('common.recharge'), state: '', log_type: 0},
      {title: this.$lang('common.withdrawal'), state: '', log_type: 1},
      {title: this.$lang('common.transfer'), state: '', log_type: 2},
      {title: this.$lang('common.pointsToU'), state: '', log_type: 3},
      // {title: this.$lang('common.otherDetails'), state: '', log_type: 4},
    ];
		this.cid =e.cid;
		this.headerTitle = e.headName;
		this.getDetail();
	
	},
	components: {
		headerBack,
	},
	onShow() {
		this.page = 1;
		this.totalPage = 1;
		this.getList();
	},
	methods: {
    changAccountType(type){
      if (this.account_type ==  type){
        return ;
      }
      // this.account_type =  type;
      // this.getList()
    },
		// 获取详情
		getDetail(){
			this.$api.sendRequest({
				url: '/api/wallet/coinOne',
				method: 'get',
				data: {money_type: this.cid},
				success:res=>{
					if(res.code == 0){
						this.walletObj = res.data;
						this.getList();
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail:err=>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			})
		},
		// 获取列表
		getList(){
      let url, params;
      if (this.log_type !== ''){
        url = '/api/wallet/coinLog';
        params = {
          type: this.log_type,
          page: this.page,
          page_size: 12
        }
      }else{
        url = '/api/memberaccount/page';
        params = {
          type: this.log_type,
          account_type: this.account_type,
          page: this.page,
          page_size: 12
        }
      }
			this.$api.sendRequest({
				url: url,
				data: params,
				method: 'get',
				success: res=>{
					if(res.code == 0){
						let result = res.data;
						this.totalPage = result.page_count

            let data = [];
            if (this.log_type!==''){
              data = result.list.map(item=>{
                return {
                  type_name: item.title,
                  account_data: item.money,
                  create_time: item.create_time,
                  id:item.id,
                }
              });

            }else{
              data = result.list;
            }
						if(this.page == 1){
							this.recordArr = data
						}else {
							this.recordArr.push(...data);
						}
					}
				}
			})
		},
		// 切换tab
		setTabs(obj,index){
			if(this.tabIndex == index) return;
			this.tabIndex = index;
			this.log_type = obj.log_type;
      this.page = 1;
      this.totalPage = 1;
      this.getList()
		},
		// 跳转详情
		toDetail(cid){
			return false;
			uni.navigateTo({
				url: '/pages/member/blance/detail?cid='+cid,
			})
		},
		toRoute(url){
			console.log(url)
			uni.navigateTo({
				url: url,
			})
		},
	},
	onReachBottom() {
		if (this.page > this.totalPage || this.page == this.totalPage) return
		this.page++
		this.getList()
	}
};
</script>


<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-data {
		width: 100%;
		padding: 20rpx 32rpx 40rpx;
		box-sizing: border-box;
		.header-wrap {
			width: 100%;
			background: linear-gradient(270deg, #FF7979 0%, #FF4F4D 100%);
			border-radius: 10rpx;
			padding: 34rpx 28rpx 24rpx;
			box-sizing: border-box;
			.wrap-box {
				display: grid;
				align-items: center;
				grid-template-columns: 1fr 1fr 1fr;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #FF8988;
				.wrap {
					color: #fff;
					font-family: PingFangSC-Regular, PingFang SC;
					font-size: 24rpx;
					.num {
						margin-top: 14rpx;
						font-weight: 600;
						line-height: 34rpx;
					}
				}
				.wrap-r {
					text-align: right;
				}	
				.wrap-c {
					text-align: center;
				}
			}
					
			.wrap-text {
				color: #fff;
			}
			
			.wrap-bom {
				margin-top: 24rpx;
				display: grid;
				align-items: center;
				grid-template-columns: 1fr 1fr 1fr;
				// padding: 0px 38rpx;
				box-sizing: border-box;
				.bom-box {
					display: flex;
					align-items: center;
					height: 56rpx;
					.bom-icon {
						width: 56rpx;
						height: 56rpx;
						margin-right: 18rpx;
					}
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
				}
				.bom-c {
					justify-content: center;
				}
				.bom-r {
					justify-content: flex-end;
				}
				.wrap-bd {
					border-right: 2rpx solid #FF8988;
				}
			}
		}
		
		.data-box {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
      .data-scroll-box{
        overflow: auto;
        white-space: nowrap;
      }
			.data-item {
        display: inline-block;
        width: auto;
        padding: 0px 20rpx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 64rpx;
				.data-name {
					font-size: 28rpx;
					font-weight: 600;
					color: #92969E;
					line-height: 40rpx;
					// padding-bottom: 8rpx;
				}
				.after {
					width: 70rpx;
					height: 6rpx;
					background: #31bb6d;
					border-radius: 4rpx;
					opacity: 0;
				}
			}
			.item-act {
				.data-name {
					color: #31bb6d;
					font-weight: 600;
				}
				.after {
					opacity: 1;
				}
			}
		}
		
		.data-ul {
			padding-top: 12rpx;
			.data-li {
				width: 100%;
				padding: 22rpx 0px 34rpx;
				border-bottom: 2rpx solid #E8EDF5;
				.data-top,.data-bom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.li-name {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #292929;
						line-height: 48rpx;
					}
				}
				.data-bom {
					padding-top: 12rpx;
					.li-time {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #92969E;
						line-height: 24rpx;
					}
					.li-state {
						color: #52CDA8;
					}
				}
			}
		}
	}
</style>
